* {
  font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial,
    'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN',
    'Source Han Sans SC', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
    'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp',
    sans-serif;
  line-height: 1.2em;
}

// 结构
.container {
  background-color: #06132A;

  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .navbar {
    background-color: #043358;
    border-color: #0d384d;
    height: 50px;

    h1 {
      text-align: center;
      color: #fff;
      font-size: 40px;
      font-weight: 300;
      line-height: 48px;
      margin: 0;
    }
  }

  .page {
    margin: 100px auto 0 auto;
    position: relative;

    .main {
      position: absolute;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      color: #98c6dc;

      &-clouds {
        &:after {
          content: '';
          display: block;
          clear: both;
        }
      }
    }
  }
}

.header-title {
  font-size: 48px;
  color: #3d9bc7;
  margin-left: 20px;
  font-weight: bolder;
  display: block;
}

.header-title.cn {
  font-size: 36px;
  height: 46px;
  padding-top: 10px;
}

.header-title.en {
  margin-top: 0px;
  font-size: 18px;
  padding-left: 6px;
  line-height: 18px;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

/* animations */
.anim-random-bar {
  height: 19px;
  width: 150px;
  position: relative;
}

.anim-random-bar:before,
.anim-random-bar:after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  width: 20%;
}

.anim-random-bar:before {
  top: 0;
  background: #03a8fc;
  animation: stretch 8s linear infinite;
}

.anim-random-bar:after {
  bottom: 0;
  background: #51c8b1;
  animation: stretch 8s 3s linear infinite;
}

@keyframes stretch {
  0% {
    width: 20%;
  }

  20% {
    width: 80%;
  }

  40% {
    width: 60%;
  }

  50% {
    width: 20%;
  }

  60% {
    width: 30%;
  }

  75% {
    width: 50%;
  }

  80% {
    width: 70%;
  }

  90% {
    width: 40%;
  }

  100% {
    width: 20%;
  }
}

/* 屏幕宽度 >= 1170px */
@media screen and (min-width: 1170px) {
  .main-animation {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
  }

  .main-animation-text {
    font-size: 28px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .page {
    width: 100%;
    height: 860px;
  }

  .main-image {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }

  // 左右公用
  .main-clouds.left,
  .main-clouds.right {
    position: absolute;

    .cloud-item {
      width: 344px;
      margin-top: 26px;

      // 小菱形
      &-header:after {
        content: '';
        display: block;
        position: absolute;
        background: rgba(0, 255, 255, 1);
        height: 10px;
        width: 10px;
        transform: rotate(45deg);
        transform-origin: center;
        opacity: 0.5;
        transition: all 0.3s ease;
      }

      // 线样式
      &-header:before {
        content: '';
        display: block;
        position: absolute;
        transition: all 0.3s ease;
        border-top: 1px dashed rgba(0, 255, 255, 0.5);
      }

      // 线位置
      &:nth-of-type(1) .cloud-item-header:before {
        height: 180px;
        width: 280px;
      }

      &:nth-of-type(2) .cloud-item-header:before {
        height: 40px;
        width: 360px;
      }

      &:nth-of-type(3) .cloud-item-header:before {
        height: 30px;
        width: 300px;
        top: auto;
        bottom: 0;
        transform: scale(1, -1);
      }

      &:nth-of-type(4) .cloud-item-header:before {
        height: 180px;
        width: 210px;
        top: auto;
        bottom: 0;
        transform: scale(1, -1);
      }
    }
  }

  // 左侧
  .main-clouds.left {
    left: 16%;

    .cloud-item:nth-of-type(2),
    .cloud-item:nth-of-type(3) {
      transform: translateX(-65%);
    }

    .cloud-item-header:after {
      right: -5px;
      bottom: -5px;
    }

    .cloud-item-header:before {
      border-right: 1px dashed rgba(0, 255, 255, 0.5);
      border-top-right-radius: 35px;
      left: 100%;
      top: 100%;
    }
  }

  // 右侧
  .main-clouds.right {
    right: 16%;

    .cloud-item:nth-of-type(2),
    .cloud-item:nth-of-type(3) {
      transform: translateX(65%);
    }

    .cloud-item-header:after {
      left: -5px;
      bottom: -5px;
    }

    .cloud-item-header:before {
      border-left: 1px dashed rgba(0, 255, 255, 0.5);
      border-top-left-radius: 35px;
      right: 100%;
      top: 100%;
    }
  }

  // .main-clouds.left .cloud-item-header.active:before {
  //   border-top: 1px solid rgba(0, 255, 255, 1);
  //   border-right: 1px solid rgba(0, 255, 255, 1);
  //   border-top-right-radius: 35px;
  // }

  // .main-clouds.right .cloud-item-header.active:before {
  //   border-top: 1px solid rgba(0, 255, 255, 1);
  //   border-left: 1px solid rgba(0, 255, 255, 1);
  //   border-top-left-radius: 35px;
  // }
}

/* 750px <= 屏幕宽度 < 1170px */
@media only screen and (min-width: 750px) and (max-width: 1169px) {
  .page {
    width: 100%;
    height: 860px;
  }

  .main {
    height: auto;
  }

  .main-animation {
    display: none;
  }

  .cloud-item {
    width: 344px;
    margin: 26px auto;
  }

  .main-clouds.left,
  .main-clouds.right {
    float: left;
    width: 50%;
  }

  .main-clouds.left {
    left: 20%;
  }

  .main-clouds.right {
    right: 20%;
  }
}

/* 屏幕宽度 < 750px */
@media screen and (max-width: 749px) {
  .page {
    width: 100%;
    height: 1320px;
  }

  .main {
    height: auto;
  }

  .main-animation {
    display: none;
  }

  .cloud-item {
    width: 344px;
    margin: 26px auto;
  }
}

.cloud-item-header.active:after {
  opacity: 1 !important;
}

.cloud-item-header {
  background: linear-gradient(315deg,
    rgba(0, 152, 236, 0.5) 0%,
    rgba(0, 152, 236, 0.5) 90%,
    rgba(0, 152, 236, 0) 90%,
    rgba(0, 152, 236, 0) 100%);
  text-align: center;
  color: #fff;
  position: relative;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.cloud-item-header.active {
  opacity: 1;
  background: linear-gradient(315deg,
    rgba(0, 255, 255, 0.8) 0%,
    rgba(0, 255, 255, 0.8) 90%,
    rgba(0, 152, 236, 0) 90%,
    rgba(0, 152, 236, 0) 100%);
}

.cloud-item-text {
  background: rgba(3, 168, 252, 0.1);
}

.cloud-item-title.cn {
  font-size: 28px;
  line-height: 2em;
}

.cloud-item-title.en {
  font-size: 22px;
}

.cloud-item-column {
  float: left;
  box-sizing: border-box;
  padding: 18px 0px 18px 0px;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
}

.cloud-item-column.left {
  width: 60%;
}

.cloud-item-column.left.full {
  width: 80%;
}

.cloud-item-column.right {
  width: 40%;
}

.cloud-item-column.right.min {
  width: 10%;
}

.cloud-item-column.right>* {
  line-height: 30px;
}

.cloud-item-column.right>*>* {
  color: #51c8b1;
}

.cloud-item-traffic-title.cn {
  line-height: 30px;
}

.cloud-item-value {
  line-height: 30px;
}

.cloud-item-traffic-title.en {
  font-size: 16px;
  line-height: 24px;
}

.cloud-item-traffic-number {
  font-size: 30px;
  line-height: 60px;
  color: #51c8b1;
}

.anim-random-bar {
  position: absolute;
  left: 32px;
  bottom: 25px;
}

.main-clouds.left .cloud-item:hover {
  .cloud-item-header {
    opacity: 1;
    background: linear-gradient(315deg,
      rgba(0, 255, 255, 0.8) 0%,
      rgba(0, 255, 255, 0.8) 90%,
      rgba(0, 152, 236, 0) 90%,
      rgba(0, 152, 236, 0) 100%);

    &:before {
      border-top: 1px solid rgba(0, 255, 255, 1);
      border-right: 1px solid rgba(0, 255, 255, 1);
      border-top-right-radius: 35px;
    }
  }
}

.main-clouds.right .cloud-item:hover {
  .cloud-item-header {
    opacity: 1;
    background: linear-gradient(315deg,
      rgba(0, 255, 255, 0.8) 0%,
      rgba(0, 255, 255, 0.8) 90%,
      rgba(0, 152, 236, 0) 90%,
      rgba(0, 152, 236, 0) 100%);

    &:before {
      border-top: 1px solid rgba(0, 255, 255, 1);
      border-left: 1px solid rgba(0, 255, 255, 1);
      border-top-left-radius: 35px;
    }
  }
}

.cloud-ckxx-img-gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  width: 100%;

  &:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

.cloud-ckxx-div {
  padding: 5px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

/*cursor*/
.cloud-item {
  cursor: pointer;
}
